<template>
	<view class="container">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="top-tabar">
			<view class="arrow" @click="returing"></view>
			<view class="title-tbar">
				车辆维修
			</view>
			<!-- 添加一个空的占位元素保持平衡 -->
			<view class="placeholder"></view>
		</view>
		<!-- 地图 -->
		<view class="map-temp">
			<map class="map-sty" :latitude="mapData.latitude" :longitude="mapData.longitude" :markers="mapData.covers">
			</map>
		</view>
		
		<!-- 卡片 -->
		<view class="card-Info">
			<view class="left-text">
				<view class="title-1">
					车百事汽车生活馆
				</view>
				<view class="score">
					<uni-rate size="18" :touchable="false" :value="3" @change="onChange" />
					<view class="score-number">
						{{score}}分
					</view> 				</view>
				<view class="content-1">
					<view class="title-11">
						营业时间:周一至周五 早上8:00-晚上22:00
					</view>
					<view class="title-12">
						位置：山阳区人民路与解放路交叉口
					</view>
				</view>
			</view>
			<view class="right-intro">
				<view class="distance">
					{{distance}}m
				</view>
				<image class="images-shop" src="/static/c1.png" mode=""></image>
			</view>
		</view>
		<view class="btn">
			<view class="btn-1"  @click="toggle('bottom')">
				<uni-icons type="phone" color="white" size="24"></uni-icons>
				<button>联系门店</button>
			</view>
			<view class="btn-1" @click="toNearby">
				<uni-icons type="shop" color="white" size="24"></uni-icons>
				<button >立即绑定</button>
			</view>
			
			
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popupRef" background-color="#fff" @change="change">
				<view class="popup-content"
				 :class="{ 'popup-height': type === 'left' || type === 'right' }">
				
				 <button class="phone-number">186241421414</button>
					<button class="copy-btn">复制</button>
					<button class="cancel-btn">取消拨号</button>
				</view>
			</uni-popup>
	</view>
	</view>
</template>

<script setup>
	
	import {
		onMounted,
		ref,
		reactive 
	} from 'vue'
	const returing = () => {
		uni.navigateBack()
	}
	
	const score = ref(4)
	const distance = ref(556)
	const mapData = ref({
		id: 0, // 使用 marker点击事件 需要填写id
		title: 'map',
		latitude: 39.909,
		longitude: 116.39742,
		covers: [{
			latitude: 39.909,
			longitude: 116.39742,
			iconPath: '../../../static/location.png'
		}, {
			latitude: 39.90,
			longitude: 116.39,
			iconPath: '../../../static/location.png'
		}]
	})
	
	const getPosition = () => {
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log(res);
				mapData.value.latitude = res.latitude;
				mapData.value.longitude = res.longitude;
			}
		})
	}
	
	
	const rateValue  = ref(3)
	const onChange=(e)=> {
		console.log('rate发生改变:' + JSON.stringify(e))
		// console.log(this.rateValue);
	}


	
		// 修复 toggle 函数
		const popupRef = ref(null)
		const popupType = ref('bottom') // 重命名避免冲突
		
		const change = (e) => {
			console.log('当前模式：' + e.type + ',状态：' + e.show)
		}
		
		const toggle = (type) => {
			console.log(type)
			popupType.value = type // 使用重命名后的变量
			// 使用 popupRef.value 而不是 this.$refs.popup
			if (popupRef.value) {
				popupRef.value.open(type)
			}
		}

	const toNearby=()=>{
		uni.navigateTo({
			url:"/pages/VehicleMaintenance/NearbyStores/NearbyStores"
		})
	}
	onMounted(() => {
		getPosition()
	})
</script>

<style scoped lang="scss">
	.container {
			width: 100vw;
			height: 100vh;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			position: relative;
		}
		
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		
		.title-tbar {
			color: white;
			font-size: 36rpx;
			text-align: center;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
		
		.top-tabar {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			background-color: #3486fd;
			height: 320rpx;
			padding: 20rpx;
			position: relative;
		}
		
		.arrow {
			border-top: 2rpx solid white;
			border-right: 2rpx solid white;
			height: 17rpx;
			width: 17rpx;
			margin-top: 15rpx;
			transform: rotate(225deg);
			flex-shrink: 0;
			z-index: 10;
			
			/* 添加点击效果 */
			&:active {
				opacity: 0.7;
				transform: rotate(225deg) scale(0.95);
			}
		}
		
		.placeholder {
			width: 20rpx;
			height: 20rpx;
			visibility: hidden;
		}
		 
		.map-temp {
			background-color: white;
			min-width: 690rpx;
			margin: 0 10rpx;
			top: 0;
			left: 0;
			right: 0;
			margin-top: -180rpx;
			position: relative;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			padding: 20rpx 20rpx 0rpx 20rpx;
			min-height: 65%; /* 减少高度占比 */
			// flex-shrink: 0; /* 防止地图区域被压缩 */
			
			
			transform-origin: center; /* 从中心缩放 */
			  transition: transform 0.3s ease; /* 平滑过渡 */
		}
		 
		.map-sty {
			width: 100%;
			height: 100%;
		}
		 
		.card-Info {
			display: flex;
			width: 100%;
			background-color: white;
			margin-top: auto; /* 将卡片推到剩余空间的底部 */
			padding: 30rpx;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx 20rpx 0 0;
			flex-shrink: 0; /* 防止卡片被压缩 */
		}
		 
		.left-text {
			flex: 2;
			width: 100%;
			padding-right: 20rpx;
		}
		 
		.right-intro {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			margin-right: 40rpx;
		}
		 
		.distance {
			font-size: 20rpx;
			color: #3486fd;
			margin-bottom: 10rpx;
		}
		
		.images-shop {
			width: 140rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}
		
		.score {
			display: flex;
			align-items: center;
			margin: 10rpx 0;
		}
		
		.score-number {
			margin-left: 20rpx;
			font-size: 20rpx;
			color: #666;
		}
		
		.content-1 {
			font-size: 20rpx;
			color: #666;
			line-height: 1.5;
		}
		 
		.btn {
			background-color: white;
			padding: 20rpx;
			flex-shrink: 0; /* 防止按钮被压缩 */
			
			display: flex;
			
		}
		.btn view:nth-child(2){
			background-color: #ff7438;
		}
		.btn-1{
			flex: 1;
			margin: 0 10rpx;
			display: flex;
			background-color: #3486fd;
			// padding: 20rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			padding: 0 50rpx;
			
			
			
		}
		.btn button {
			 border: none !important; /* 无边框 */
			    padding: 0; /* 内边距清零 */
			    margin: 0; /* 外边距清零 */
				background-color: transparent !important; /* 背景透明 */
			color: white;
			border-radius: 50rpx;
			font-size: 32rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin-left: 20rpx;
			flex-shrink: 0; /* 防止按钮被压缩 */
		}
		
		
		@mixin flex {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
			}
		
			@mixin height {
				/* #ifndef APP-NVUE */
				height: 100%;
				/* #endif */
				/* #ifdef APP-NVUE */
				flex: 1;
				/* #endif */
			}
		
			.box {
				@include flex;
			}
		
			.button {
				@include flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				height: 35px;
				margin: 0 5px;
				border-radius: 5px;
			}
		
			.example-body {
				background-color: #fff;
				padding: 10px 0;
			}
		
			.button-text {
				color: #fff;
				font-size: 12px;
			}
		
			.popup-content {
				 display: flex;
				    flex-direction: column;
				    padding: 0;
				    
				    button {
				        background-color: white;
				        border: none !important;
				        border-bottom: 1px solid #eeeeee !important;
				        padding: 15rpx;
				        text-align: center;
				        font-size: 32rpx;
				        width: 100%;
				        border-radius: 0;
				        
				        &.phone-number {
				            // color: #3486fd;
				            font-size: 36rpx;
				            // font-weight: bold;
				            // border-bottom: 1px solid #eeeeee !important;
				        }
				        
				        &.copy-btn {
				            // color: #666;
				            // border-bottom: 1px solid #eeeeee !important;
				        }
				        
				        &.cancel-btn {
				            // color: #ff7438;
				            // font-weight: bold;
				            border-bottom: none !important; /* 最后一个取消底部边框 */
				        }
				        
				        &:active {
				            background-color: #f5f5f5;
				        }
				    }
			}
		// .popup-content button{
		// 	background-color: white;
			
		// 	border: none !important;
		// }
			.popup-height {
				@include height;
				width: 200px;
			}
		
			.text {
				font-size: 12px;
				color: #333;
			}
		
			.popup-success {
				color: #fff;
				background-color: #e1f3d8;
			}
		
			.popup-warn {
				color: #fff;
				background-color: #faecd8;
			}
		
			.popup-error {
				color: #fff;
				background-color: #fde2e2;
			}
		
			.popup-info {
				color: #fff;
				background-color: #f2f6fc;
			}
		
			.success-text {
				color: #09bb07;
			}
		
			.warn-text {
				color: #e6a23c;
			}
		
			.error-text {
				color: #f56c6c;
			}
		
			.info-text {
				color: #909399;
			}
		
			.dialog,
			.share {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
			}
		
			.dialog-box {
				padding: 10px;
			}
		
			.dialog .button,
			.share .button {
				/* #ifndef APP-NVUE */
				width: 100%;
				/* #endif */
				margin: 0;
				margin-top: 10px;
				padding: 3px 0;
				flex: 1;
			}
		
			.dialog-text {
				font-size: 14px;
				color: #333;
			}
</style>
